<template>
  <ul class="bw-com-node-attr-list">
    <template v-for="item in curNodeAttrList" :key="item.key">
      <li class="bw-com-node-attr-item">
        <div class="handred" @click="item.isExpand = !item.isExpand">
          <span class="handred-title"> {{ item.name }} </span>

          <div class="handred-extra">
            <Icon
              class="bw-close-icon"
              :icon="
                item.isExpand
                  ? 'ant-design:down-outlined'
                  : 'ant-design:left-outlined'
              "
            />
          </div>
        </div>

        <div :class="['content', item.isExpand && 'content-expand']">
          <div class="content-item">
            <span class="label"> 属性值类型: </span>
            <a-select
              class="input"
              v-bind="getAttrDataTypeOptions(item)"
              v-model:value="curNodeAttrDataTypes[item.key]"
              @change="
                onChangeAttrValueDataType(
                  item.key,
                  curNodeAttrDataTypes[item.key]
                )
              "
            />
          </div>

          <div class="content-item">
            <span class="label"> 属性值来源: </span>
            <a-select
              class="input"
              :options="bwNodeAttrFromTypeList"
              v-model:value="curNodeAttrValueFroms[item.key]"
              @change="
                onChangeAttrValueFrom(item.key, curNodeAttrValueFroms[item.key])
              "
            />
          </div>

          <div class="content-item node-attr-value">
            <span class="label"> 属性值配置: </span>
            <BwNodeAttrValue
              class="input"
              :attrInfo="item"
              :attrData="curNodeAttrData"
              :valueFrom="curNodeAttrValueFroms[item.key]"
              :valueDataType="curNodeAttrDataTypes[item.key]"
              @change="onChangeAttrValue"
            />
          </div>
        </div>
      </li>
    </template>
  </ul>
</template>

<script lang="ts" setup>
import { useNodeAttrs } from './util'

import BwNodeAttrValue from './coms/index.vue'

const {
  curNodeAttrList,
  curNodeAttrData,
  curNodeAttrDataTypes,
  curNodeAttrValueFroms,
  bwNodeAttrFromTypeList,

  onChangeAttrValue,
  onChangeAttrValueFrom,
  getAttrDataTypeOptions,
  onChangeAttrValueDataType,
} = useNodeAttrs()
</script>

<style lang="less" scoped>
.bw-com-node-attr-list {
  padding: 0 16px;
  width: calc(100% - 32px);
  height: calc(100% - 16px);

  .bw-com-node-attr-item {
    width: 100%;
    border-radius: 5px;
    margin-bottom: 8px;
    border: 1px solid #e8e8e8;

    .handred {
      height: 30px;
      padding: 0 8px;
      width: calc(100% - 16px);
      display: inline-flex;
      align-items: center;
      justify-content: space-between;

      .handred-title {
        flex: 1;
      }
    }

    .content {
      height: 0;
      padding: 0 8px;
      overflow: hidden;
      width: calc(100% - 16px);
    }

    .content-expand {
      height: auto;
      padding: 8px;
      border-top: 1px solid #e8e8e8;

      .content-item {
        width: 100%;
        display: flex;
        align-items: center;
        margin-bottom: 3px;
        justify-content: space-between;

        .label {
          width: 80px;
        }

        .input {
          flex: 1;
        }
      }

      .node-attr-value {
        align-items: flex-start;
        .label {
          line-height: 32px;
        }
      }
    }
  }
}
</style>
